<template>
	<view class="order-express-container">
		<view class="expressage-info" @click="checklogistics">
			<view class="iconfont icon">&#xe6fa;</view>
			<text class="name">{{expressInfo.express_company_name}}</text>
			<text class="number">{{expressInfo.express_code}}</text>
			<view class="iconfont array">&#xe67f;</view>
		</view>
	</view>
</template>
<script>
	/**
	 * 快递信息
	 * @property {Object} stOrderExpress
	 * 
	 */
	export default {
		name: 'stOrderExpress',
		props:{
			orderSn:{
				type: String,
				default: ''
			},
			expressInfo: {
				type: Object,
				default(){
					return {}
				}
			}
		},
		data() {
			return {}
		},
		methods: {
			checklogistics(){
				uni.navigateTo({
					url: `/subPackages/logistics/detail?ordersn=${this.orderSn}`
				})
			},
		}
	}
</script>
<style lang="scss">
.order-express-container{
	padding: 0 24rpx;
	margin-bottom: 20rpx;
	.expressage-info {
		@extend .alignItems;
		padding: 24rpx;
		background-color: $uni-bg-color;
		position: relative;
		.icon{
			font-size: 40rpx;
			background: linear-gradient(135deg, #37a8ff 0%, #2196F3 100%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-fill-color: transparent;
		}
		.name{
			font-size: $uni-font-size-sm;
			margin-left: 18rpx;
		}
		.number{
			font-size: $uni-font-size-sm;
			color: $uni-text-color-grey;
			margin-left: 20rpx;
		}
		.array{
			position: absolute;
			right: 24rpx;
			top: 50%;
			transform: translateY(-50%);
			color: #a0a0a0;
		}
	}
}
</style>
